<template>
    <div class="dahezi">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>修改密码</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="hezi">
            <div class="hezi2">
                <div class="hezi3">
                    <div class="gerenquyu">
                        <div class="gerenquyu1">
                                <img :src="basicUserInformation.avatar">

                                <div>你好！{{basicUserInformation.username}}</div>
                            <div class="shurkuang">
                                <el-input :minlength="7"   v-model="mmima" placeholder="请输入新密码"></el-input>
                                <div class="queding">  <el-button @click="quedingxiugai" type="primary" round>确定</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xiangqingxinqi">

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "xiugaiima",
        data(){
            return{
                basicUserInformation:{},
                mmima:''
            }
        },
        created() {
            this.getgerenziliao()
        },
        methods:{
            async   getgerenziliao(){
                const {data:jieguo}=await this.$http.get('user/info',{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})
                this.basicUserInformation=jieguo.data.basicUserInformation
            },
            async quedingxiugai(){
                await this.$http.get(`user/updatePassword?password=${this.mmima}`,{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})
                this.$message.success('修改成功！')
                this.mmima=''
            }
        }
    }
</script>

<style scoped>
    .hezi{
        width: 80%;
        height: 700px;
        display: flex;
        justify-content:center;
        /*align-items:center;*/
    }
    .hezi2{
        width: 70%;
        background-color: white;
        height: 650px;
        margin-top: 3px;
        /*display: flex;*/
        /*justify-content:center;*/
    }
    .hezi3{
        width: 100%;
        display: flex;
        justify-content:center;
        position: relative;

    }
    .dahezi{
        padding-top: 3px;
        background-color: #fffacd;
    }
    .gerenquyu{
        height: 100px;
        width: 100px;
        padding: 5px;
        background-color: white;
        margin-top: 20px;
    }
    .gerenquyu img{
        width: 100%;
        height: 100%;
    }
    .xiangqingxinqi{
        display: flex;
        width: 95%;
        height: 100%;
        padding-right: 100px;
        padding-left: 100px;
    }
    .gerenquyu{
        height: 180px;
        width: 100%;
        margin-top: 20px;
        display: flex;
    }
    .gerenquyu1{
        height: 150px;
        width: 150px;
        padding: 5px;
        background-color: white;
        margin-left: 40%;
    }
    .shurkuang{
        position: relative;
        width: 200px;
        right: 50px;
        padding-top: 5px;
    }
    .queding{
        padding-top: 10px;
        padding-left: 60px;
    }
</style>
